<template>
  <div class="profilechange">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="更改姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="账号创建日期"> </el-form-item>

      <el-form-item label="描述一下自己呗">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item class="button-group">
        <el-button type="primary" @click="onSubmit">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/userStore";
import { ElMessage, ElForm, ElFormItem, ElInput } from "element-plus";
import request from "@/utils/request";

const router = useRouter();
const userStore = useUserStore();

// 修复：form.name 初始值从 Store 的 getName 取（确保页面加载时显示正确）
const form = reactive({
  name: userStore.getName, // 从 getName 取（已有“游客”默认值，避免空）
  desc: userStore.userInfo?.desc || "", // 其他字段从 userInfo 取，加默认值
  createTime: userStore.userInfo?.createTime || "未获取", // 账号创建日期
});

// 修复：用 Store 的 fetchUserInfo 拉取用户信息，而非自己写请求
const loadUserInfo = async () => {
  try {
    // 调用 Store 方法，请求后端并赋值 userInfo
    const userData = await userStore.fetchUserInfo();
    if (userData) {
      // 拉取成功后，更新表单数据（同步后端返回的真实信息）
      form.name = userData.name || "";
      form.desc = userData.desc || "";
      form.createTime = userData.createTime || "未获取";
      ElMessage.success("加载用户信息成功");
    }
  } catch (error) {
    ElMessage.error("加载用户信息失败：" + (error.message || "网络异常"));
  }
};

// 修复：提交修改时，调用后端接口更新，并同步 Store
const onSubmit = async () => {
  try {
    // 调用后端“更新用户信息”接口（假设是 PUT 方法）
    const res = await request.put("/api/auth/profile", {
      name: form.name,
      desc: form.desc,
    });
    if (res.code === 200 || res.success) {
      // 更新成功后，同步更新 Store 中的 userInfo
      userStore.setUserInfo({
        ...userStore.userInfo, // 保留原有字段（如 email、createTime）
        name: form.name, // 更新新姓名
        desc: form.desc, // 更新新描述
      });
      ElMessage.success("修改资料成功");
      router.push("/profile"); // 跳回个人中心
    }
  } catch (error) {
    ElMessage.error("修改失败：" + (error.message || "服务器异常"));
  }
};

// 页面加载时，调用 loadUserInfo 拉取用户信息
onMounted(() => {
  loadUserInfo();
});

// 取消按钮逻辑
const goBack = () => {
  router.push("/profile");
};
</script>

<style scoped>
.profilechange {
  background-color: white;
  border-radius: 20px;
  max-width: 800px;

  margin: 0 auto;
  padding: 20px;
}

.buttongroup {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.profile-card {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
}

.header-icon {
  font-size: 24px;
  color: #409eff;
}

.profile-content {
  padding: 20px 0;
}

.user-info-section {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.user-avatar {
  background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
  color: white;
  font-size: 32px;
}

.user-details h3 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #303133;
}

.user-email {
  margin: 0 0 12px 0;
  color: #909399;
  font-size: 14px;
}

.profile-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.account-stats h4 {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 16px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-page {
    padding: 16px;
  }

  .user-info-section {
    flex-direction: column;
    text-align: center;
  }

  .profile-actions {
    justify-content: center;
  }

  .stat-number {
    font-size: 24px;
  }
}
</style>
